<template>
  <div style="display: flex; height: 50vh;">
    <div style="flex: 1.3;" v-if="isAll">
      <div id="containerDetail"></div>
    </div>
    <div style="flex: 1; margin-left: 10px;">
      <el-scrollbar style="width: 100%; height: 100%;">
        <el-row style="font-size: 16px;">
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">ID</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ details.id }}</span>
          </el-col>
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">设备名称</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ details.name }}</span>
          </el-col>
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">设备编号</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ details.device_no }}</span>
          </el-col>
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">设备类型</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ details.mold_text }}</span>
          </el-col>
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">设备预警值</span>
            <div style="display: flex; flex-direction: column;">
              <span
                class="content"
                style="width: 100%; white-space: nowrap;"
                :class="{ halfFontColor: !isAll }"
                v-for="(item, index) in details.warn_data"
                :key="index"
                >{{ item.title + '：' + item.value }}</span
              >
            </div>
          </el-col>
          <el-col :span="24" class="col" v-if="isFireControlHost">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备名称</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_name'] }}</span>
          </el-col>
          <el-col :span="24" class="col" v-if="isFireControlHost">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备编号</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_device_no'] }}</span>
          </el-col>
          <el-col :span="24" class="col" v-if="isFireControlHost">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">子设备位置</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ data['sub_address'] }}</span>
          </el-col>
          <!-- <el-col :span="24" class="col">
                      <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">所属单位</span>
                      <span class="content" :class="{ halfFontColor: !isAll }">{{ details.yj_full_name || details.yj_unit_full_name }}</span>
                  </el-col> -->
          <!-- <el-col :span="24" class="col">
                      <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">事件描述</span>
                      <span class="content" :class="{ halfFontColor: !isAll }">{{ details.event_type }}</span>
                  </el-col> -->
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装时间</span>
            <span class="content" :class="{ halfFontColor: !isAll }">{{ formatDate(details.create_time) }}</span>
          </el-col>
          <!-- <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">量值</span>

            <span v-if="details.last_report_data?.deviceType!=='SW'" class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span>
            <span v-else class="content" :class="{ halfFontColor: !isAll }">
                <div>类型：{{details.last_report_data.exec_type}}</div>
                <div>警告：{{details.last_report_data.warning}}</div>
            </span>
          </el-col> -->
          <el-col :span="24" class="col">
            <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装照片</span>
            <el-image
              style="width: 100px; height: 100px; margin: 10px;"
              :src="upDataUrl + details.image"
              class="checkImg"
              :preview-src-list="[upDataUrl + details.image]"
            ></el-image>
            <!-- <span class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span> -->
          </el-col>
          <!-- <el-col :span="24" class="col">
                        <span class="title2" :class="{ halfBgColor: !isAll, halfFontColor: !isAll }">安装视频</span>
                        <span class="content" :class="{ halfFontColor: !isAll }" v-html="details.measure"></span>
                    </el-col> -->
          <el-col style="margin-top: 10px;" v-if="!isAll">
            <recentRescue :coordinate="{ longitude: details.longitude, latitude: details.latitude }"> </recentRescue>
          </el-col>
        </el-row>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  props: ['details', 'isAll'],
  data() {
    return {
      map: '',
      upDataUrl: import.meta.env.DEV ? '/proxy/' : ''
    }
  },
  mounted() {
    console.log(this.details)
    if (this.isAll) {
      setTimeout(() => {
        this.getMap(this.details.longitude, this.details.latitude)
      }, 500)
    }
  },
  computed: {
    data: {
      get() {
        return this.details.device_data
      },
      set() {}
    },
    isFireControlHost: {
      get() {
        return this.data.service_type === 'fireControlHost'
      },
      set() {}
    }
  },
  beforeUnmount() {
    if (this.isAll) {
      this.map.clearMap()
      this.map.destroy()
    }
  },
  methods: {
    // 定位
    getMap(lng, lat) {
      // 地图
      var marker = null
      var map = new AMap.Map('containerDetail', {
          resizeEnable: true, // 允许缩放
          center: [lng, lat], // 设置地图的中心点
          zoom: 15 // 设置地图的缩放级别，0 - 20
        }),
        doMark = (lng, lat) => {
          // 设置标记
          map && marker && map.remove(marker)
          marker = new AMap.Marker({
            map: map,
            position: new AMap.LngLat(lng, lat) // 经纬度
          })
        }
      this.map = map
      map.on('click', (res) => {
        console.log(res)
        // doMark(lng, lat);
      })
      doMark(lng, lat)
    },
    // 时间转换
    formatDate(timeStamp) {
      if (!timeStamp) return '/'
      // timeStamp = +timeStamp
      timeStamp = timeStamp * 1000
      var date = new Date(timeStamp)
      // 年月日
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var day = date.getDate()
      day = day < 10 ? '0' + day : day
      // 时分秒
      var hour = date.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var min = date.getMinutes()
      min = min < 10 ? '0' + min : min
      var sec = date.getSeconds()
      sec = sec < 10 ? '0' + sec : sec
      return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec
    }
  }
}
</script>
<style scoped lang="scss">
.halfFontColor {
    color: #fff !important;
}
.halfBgColor {
    background-color: #2c5367 !important;
}
.title2 {
    background-color: #f7f7f7;
    text-align: center;

    /* width: 150px; */
    width: 30%;
    display: inline-block;
    border-bottom: 1px solid #e8edf8;
    padding: 15px 0;
}
.content {
    padding: 15px 0 15px 15px;
    width: 70%;
}
.col {
    border-bottom: 1px solid #e8edf8;

    /* height: 40px;
  line-height: 40px; */
    display: flex;
}
#containerDetail {
    z-index: 100;
    width: 100%;
    height: 100%;
}
</style>
